<template>
	<echelon-solutions>
		<!-- 这里是顶部导航栏 -->
		<skyline-navigation title="登录" showBack="0" center></skyline-navigation>
		<!-- 这里是中间区域 -->
		<central-hub>
			<view class="hub-login-form">
				<image src="@/static/logo2.png" mode="widthFix" style="
    margin: 0 auto;
    width: 100px;"></image>
				<view class="flexGap flex-column">
					<template v-for="cur of select_options.slice(1)">
						<view class="luxuriant-background flexGap">
							<button type="primary" @click="copy(cur.label)">账号：{{cur.label}}（点击复制）</button>
							<button type="warn" @click="copy(cur.value.split('/至/')[1])">密码：{{cur.value.split('/至/')[1]}}（点击复制）</button>
						</view>
					</template>
				</view>
				<a class="luxuriant-background" href="http://sakuq.xyz/smart" target="_blank">请复制账号和密码：点击 前往新的系统 登录》》》没有保存账号密码或忘记账号密码请找管理员</a>
				<!-- <view class="form-item">
					<my-select :options="select_options" v-model="select_value" @change="handleSearch"></my-select>
				</view> -->
				<!-- <view>账号：</view>
				<view class="form-item">
					<my-input placeholder="请输入账号" v-model="form.username" />
				</view>
				<view>密码：</view>
				<view class="form-item">
					<my-input placeholder="请输入密码" type="password" v-model="form.password" />
				</view>
				<button type="primary" @click="hadndleLogin">登录</button> -->
			</view>
		</central-hub>
	</echelon-solutions>
</template>

<script>
	import {
		login
	} from '@/services/base/bill/auths.js'
	export default {
		onLoad() {
			// 重置路由记录
			this.$record.upRecordAry([]);
			const d = this.$storage.get('storageLogin') || [];
			this.select_options = [{
				label: '请选择账号',
				value: ''
			}, ...d];

		},
		methods: {
			copy(inputText) {
				uni.setClipboardData({
					data: inputText,
					success() {
						uni.$u.toast(inputText);
					},
					fail() {
						uni.$u.toast('复制失败');
					}
				});
			},
			handleSearch(val) {
				const [username, password] = val.split('/至/');
				this.form = {
					username,
					password
				};
			},
			async hadndleLogin() {
				const {
					token,
					data,
				} = await login(this.form);
				const {
					username,
					password
				} = this.form;
				const d = this.$storage.get('storageLogin') || [];
				const sel = d.filter(it => it.label !== username);
				this.$storage.set('storageLogin', [...sel, {
					label: username,
					value: username + '/至/' + password
				}]);
				this.$storage.set('token', token);
				this.$storage.set('login', data);
				this.$record.reLaunch({
					url: '/pages/tabBar/home'
				})
			},
		},
		data() {
			return {
				select_value: '',
				select_options: [],
				form: {
					username: '', // 账号
					password: '' // 密码
				}
			}
		}
	}
</script>

<style scoped>
	.luxuriant-background {
		/* 琉璃渐变背景 */
		background-image: linear-gradient(135deg,
				rgba(255, 235, 215, 0.15),
				rgba(187, 212, 230, 0.1),
				rgba(100, 180, 255, 0.05));

		/* 光泽效果 */
		backdrop-filter: blur(10px) brightness(110%);

		/* 边框和圆角 */
		border: 1px solid rgba(255, 255, 255, 0.3);
		border-radius: 12rpx;

		/* 阴影效果 */
		box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.08);

		/* 内容间距 */
		padding: 6px 20rpx;
		box-sizing: border-box;
	}

	/* CSS 代码 */
	.hub-login-form {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		padding: 24rpx;
		justify-content: center;
		/* height: 90vh; */
	}

	.primary {
		width: 100%;
	}
</style>